<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../utils/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<mycpn></mycpn>
		</div>
	</body>

	<!-- <script type="text/template" id="test">
		<div>
			<h1>第1种vue组件模板分离写法</h1>
			<p>我是内容</p>
		</div>
	</script> -->
	
	<template id="test">
		<!-- template要有一个根节点(div),否则只显示第一个元素 -->
		<div>
			<h3>第2种vue组件模板分离写法</h3>
			<p>contact1</p>
		</div>
	</template>

	<script>
		//全局注册
		// Vue.component("mycpn",{
		// 	template:"#test"
		// })

		new Vue({
			el: "#app",
			// 局部注册
			components: {
				mycpn: {
					template: "#test"
				}
			}

		})
	</script>
</html>
